<template>
    <div class="login-panel">
        <h1 class="title">登入界面</h1>

        <div class="tabs">
            <el-tabs type="border-card" stretch v-model="activeName">
                <!-- qq邮箱登入 -->
                <el-tab-pane label="邮箱登入" name="email">
                    <template #label>
                        <el-icon><User /></el-icon>
                        <span class="text">qq邮箱登入</span>
                    </template>
                    <email ref="emailRef" />
                </el-tab-pane>

                <!-- s手机登入 -->
                <el-tab-pane label="手机登入" name="phone">
                    <template #label>
                        <el-icon><Iphone /></el-icon>
                        <span class="text">手机登入</span>
                    </template>
                    <phone />
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="control">
            <!-- v-model就是vue项目里面的双向绑定 -->
            <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
            <el-link type="primary">忘记密码</el-link>
        </div>


        <!-- 底部区间 -->
        <el-button class="login-btn" type="primary" size="large" @click="handleLoginCheck">
            立即登入
        </el-button>
        
    </div>
</template>

<script setup lang="ts">
import email from '../login-panel/email.vue'
import phone from '../login-panel/phone.vue'

// 设置是否记住密码
import {ref} from 'vue'
const isRemPwd = ref(false)
const activeName = ref('email')
// const emailRef = ref<any>()

// 绑定下面的组件，使用下面的组件
import Email from '../login-panel/email.vue'
const emailRef = ref<InstanceType<typeof Email>>()


    
function handleLoginCheck(){
    if(activeName.value === "email"){
        // 1.获取子组件的实例
        // 2.调用他的方法
        emailRef.value?.loginAction()
    }else{
        console.log("phone")
    }
}
</script>


<style lang="less" scoped>
.login-panel{
    width:380px;
    margin-bottom: 170px;

    .title{
        text-align: center;
        margin-bottom: 15px;
    }

    .icon{
        display: flex;
        align-items: center;
        justify-content: center;
        .test{
            margin-left: 5px;
        }
    }

    .text{
        margin-left: 5px;
    }

    .control{
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
    }

    .login-btn{
        //要想改变组件的属性，直接在zhe
        margin-top: 10px;
        width: 100%;
    }
}
</style>